<script setup>
import selectPost from './components/selectPost.vue'
import { nextTick, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getSelectPostListApi } from '@/apis/post';

const route = useRoute();


// #region 发送请求获得数据
const postList = ref([])

const getSelectPostList = async (queryString) => {
  const res = await getSelectPostListApi(queryString)
  postList.value = res

}
// #endregion

// #region

const handleSelect = (index) => {
  console.log(index)
}
// #endregion

watch(route, async () => {

  await getSelectPostList({ queryString: route.params.queryString })

})

onMounted(async () => {

  await getSelectPostList({ queryString: route.params.queryString })
})



</script>

<template>
  <div class="select-container">
    <div class="select-menu">
      <!-- <el-menu mode="horizontal" @select="handleSelect" default-active="1">
        <el-menu-item index="1">帖子</el-menu-item>
        <el-menu-item index="2">用户</el-menu-item>
      </el-menu> -->
    </div>
    <div class="select-content">
      <selectPost :postList="postList"></selectPost>
    </div>
  </div>
</template>

<style lang='scss' scoped>
/* 电脑端样式 */
@media screen and (min-width: 768px) {
  .select-container {
    min-width: 80vw;
    height: 100vh;
    box-sizing: border-box;
    border: 1px solid rgb(255, 255, 255);

    .select-menu {
      margin-top: 80px;
    }
  }
}

/* 手机端样式 */
@media screen and (max-width: 768px) {
  .select-container {
    min-width: 80vw;
    height: 100vh;
    border: 1px solid rgb(255, 255, 255);
    box-sizing: border-box;


    .select-menu {
      margin-top: 80px;
    }
  }
}
</style>